<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/themes/bootstrap/easyui.css" />
<link type="text/css"
	href="${pageContext.request.contextPath}/themes/icon.css"
	rel="stylesheet">
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery-1.9.1.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery.easyui.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/easyui-lang-zh_CN.js"></script>
</head>
<script type="text/javascript">
$(function(){
	$('#dg').datagrid({    
	    url:'addrole',    
	    columns:[[    
	        {field:'rId',title:'角色ID',width:150,hidden:true},    
	        {field:'rName',title:'角色名',width:150},    
	        {field:'fc',title:'权限',width:510,
	        	formatter:function(val,row,index){  
	        		return '<select id="func'+row.rId+'" name="func" style="width:500px;"></select>';  
	    	    }	         
	        }		        
	    ]],
		onLoadSuccess:function(data){	
			$.each(data.rows,function(i,n){
				var rid = n.rId
				$("#func"+rid).combotree({    
			   	   	url: 'alltree',
			   	   	queryParams:{"rId":rid},
			   	   	multiple:true,
			   	   	panelHeight:'auto',	 
			  	 	 onLoadSuccess:function(node,data){
			  	 		$("#func"+rid).combotree('tree').tree('expandAll');
			  	 	 }
		   	   	})   				   	
			})	
		},
		onClickRow:function(index, row){
			var rid = row.rId;
			console.log(rid)
				
			
		},
	    pagination:true,
	    rownumbers:true,
	    toolbar: [{
			iconCls: 'icon-add',
			text:'增加角色',
			handler: function(){
				$("#win").window('open');
			}
		}]

	}); 
	
	$("#addf").combotree({    
   	   	url: 'owntree',
   	    multiple:true,
   	   	panelHeight:'auto',	 	    	
   	  	onLoadSuccess:function(noda,data){
   	 	 	$("#addf").combotree('tree').tree('expandAll');
   	  	}
   	})	
   	  	
    
   	$("#can").linkbutton({
   		onClick:function(){
   			$("#win").window('close');
   			$("#rname").textbox('clear');
   			$("#addf").combotree('clear');
   		}
   	})
   	
   	$("#con").linkbutton({
   		onClick:function(){
   			var rname = $("#rname").textbox('getText');
   			var sel = $("#addf").combotree('tree').tree('getChecked');
   			var ind = $('#addf').combotree('tree').tree('getChecked', 'indeterminate');
   			var a = [];
   			$.each(ind,function(i,n){
   				a.push(n.id);
   			})
   			$.each(sel,function(i,n){
   				a.push(n.id);
   			})
   			$.ajax({
   				url:'newrole',
   				data:{"rname":rname,"func":a},
   				tpye:'post',
   				traditional:true,
   				success:function(flag){
   					if(flag==1){
   						$("#win").window('close');
   		   				$("#rname").textbox('clear');
   		   				$("#addf").combotree('clear');
   		   				$('#dg').datagrid('reload');
   		   				$.messager.alert('提示','增加成功'); 
   		   				
   					}else{
   						$.messager.alert('提示','增加失败'); 
   					}
   				}
   				
   			})
   		}
   	})
   	

   
  
})
</script>
<body>
	<table id="dg"></table>  
	<div id="win" class="easyui-window" title="增加角色" style="width:350px;height:200px" data-options="modal:true,closed:true">   
    	<div style="margin-top: 30px;margin-left: 30px">
    		 角色名&nbsp;<input id='rname' class="easyui-textbox" data-options="" style="width:200px"> <br/><br/>
    		 权&nbsp;&nbsp;&nbsp;&nbsp;限  <input id="addf"  style="width:200px">  <br/><br/>
    	</div>  
    	<div style="margin-left: 80px">
    		<a id="con" href="#" class="easyui-linkbutton" data-options="width:80">确定</a> 
    		<a id="can" href="#" class="easyui-linkbutton" data-options="width:80">取消</a> 
    	</div>  
	</div>  
	
	<div id="up" class="easyui-window" title="是否确认更改" style="width:300px;height:200px" data-options="modal:true,closed:true">   
   		<p style="margin: 20px;font-size: 15px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;您对功能权限进行了更改，请问是否保存变动？</p> <br/>
   		<div style="margin-left: 60px">
    		<a id="conup" href="#" class="easyui-linkbutton" data-options="width:80">确定</a> 
    		<a id="canup" href="#" class="easyui-linkbutton" data-options="width:80">取消</a> 
    	</div>    		  
	</div>  	
	

</body>
</html>